<template>
	<view class="season-rank flex-c">
		<view class="expert-list-item thinborder" v-for="(expert, index) in list" :key="index">
			<view class="expert-des-head flex-r ac">
				<view class="author-image border-round"  @tap="$CHS.goExpertHome(expert.expertId, 'expert')">
					<lazy-image class="inheritwh border-round" :src="expert.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
					<image v-if="index < 3" class="rank-icon" :src="require('@/public/images/expert/rank_'+index+'.png')" mode="aspectFit"></image>
				</view>
				<view class="author-info flex-c">
					<view class="info-top flex-r ac">
						<text class="text-primary">{{expert.expertName}}</text>
						<image v-if="expert.cardFlag == 1" src="@/public/images/public/y@1x.png" mode="aspectFit"></image>
						<text class="tag-red" v-if="expert.hotContineTxt">{{expert.hotContineTxt}}</text>
					</view>
					<view class="info-detail text-info color-grey text-hidden">
						{{expert.remark}}
					</view>
				</view>
				<view class="author-result flex-c color-red" v-if="Number(expert.hitRate) >= 60">
					<view class="result-rate flex-r">
						<text class="text-num">{{expert.hitRate}}</text>
						<text class="text-mini">%</text>
					</view>
					<text class="text-info">联赛命中率</text>
				</view>
			</view>
			<view class="expert-des-body flex-r">
				<view class="author-fav">
					<button v-if="(expert.followStatus == 1 && noFollow.indexOf(expert.expertId) < 0) || isFollow.indexOf(expert.expertId) > -1"  class="favbtn" :class="{'nochat': expert.userIdentity != 1}" @tap.stop="$CHS.goChat(expert.expertId, expert.userIdentity)">私信</button>
					<button v-else class="favbtn" @tap.stop="favExpert(expert.expertId)">+关注</button>
				</view>
				<view class="author-tag flex-c text-mini">
					<view class="tag-top flex-r ac">
						<text class="hit-result" v-if="expert.hitResultTxt">{{expert.hitResultTxt}}</text>
						<view class="red-history flex-r ac" v-if="expert.maxHitNum">
							<text class="color-white">联赛历史连红</text>
							<text class="bg-white color-red">{{expert.maxHitNum}}连红</text>
						</view>
					</view>
					<!-- <view class="article-num flex-r ac" @tap.stop="goSeasonArticle(expert.expertId)">
						<text class="color-white">联赛方案</text>
						<view class="right-view flex-r ac">
							<text class="color-primary">{{expert.totalSum || 0}}篇</text>
							<image class="right-icon" src="@/public/images/expert/yjt.png" mode="aspectFit"></image>
						</view>
					</view> -->
					<view class="expert-article text-mini flex-r ac jsb">
						<view class="flex-r ac">
							<text>近7天有</text>
							<text class="color-blue">{{expert.newArticleNum || 0}}</text>
							<text>条最新方案</text>
						</view>
						<image class="icon" src="@/public/images/public/yjt_h.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * SeasonRank 联赛排行
	 * @description 比赛详情联赛排行榜
	 * @property {Array} list 专家列表数据
	 * @property {Number} seasonId 联赛ID
	 * @property {Number} sportId 比赛类型：1 足球， 2 篮球
	 * @example <SeasonRank :list="list"></SeasonRank>
	 */
	export default {
		name: "SeasonRank",
		props: {
			list: {
				type: [Array, Object],
				default: ()=>[]
			},
			seasonId: {
				type: [Number, String]
			},
			sportId: {
				type: [Number, String]
			}
		},
		data() {
			return {
				isFaving: null //防止重复关注
			}
		},
		computed: {
			noFollow() {
				return this.$store.state.expertNoFollow
			},
			isFollow() {
				return this.$store.state.expertFollow
			}
		},
		methods: {
			/**
			 * @description 关注专家
			 * @param {string} eid 专家ID
			 */
			favExpert(eid) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(eid === this.isFaving){
					return
				}else{
					this.isFaving = eid
					this.$CHS.favExpert(eid).finally(()=>{
						this.isFaving = null
					})
				}
			},
			/**
			 * @description 跳转专家主页
			 * @param {string} expertId 专家ID
			 */
			goExpertHome(expertId) {
				let pages = getCurrentPages()
				// 此处跳转需携带联赛信息
				let params = {eid: expertId, random: Date.now(), seasonId: this.seasonId, sportId: this.sportId}
				if(pages.length < 8){
					this.$Router.push({name: 'experthome', params})
				}else{
					this.$Router.replace({name: 'experthome', params})
				}
			},
			/**
			 * @description 打开专家联赛方案列表
			 * @param {string} expertId 专家ID
			 */
			goSeasonArticle(expertId) {
				this.$goByName('seasonarticle', {eid: expertId, sport: this.sportId, sid:  this.seasonId})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.season-rank{
		/deep/ .empty-content{
			flex: 2;
		}
		.expert-list-item{
			padding: 30rpx 20rpx;
			background-color: #FFFFFF;
			//border-bottom: 1rpx solid #ededed;
			.expert-des-head{
				.author-image{
					width: 88rpx;
					height: 88rpx;
					background-color: #FFFFFF;
					background-size: 100%;
					position: relative;
					.rank-icon{
						position: absolute;
						bottom: 0;
						left: 0;
						width: 98rpx;
						height: 98rpx;
					}
				}
				.author-info{
					flex: 2;
					margin-left: 20rpx;
					.info-top{
						font-weight: 500;
						image{
							margin-left: 7rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}
					.info-detail{
						max-width: 370rpx;
						margin-top: 20rpx;
					}
				}
				.author-result{
					align-items: flex-end;
					.result-rate{
						align-items: flex-end;
						margin-bottom: 15rpx;
						.text-num{
							font-size: 36rpx;
							font-weight: 500;
						}
					}
				}
			}
			.expert-des-body{
				margin-top: 10rpx;
				.author-fav{
					.favbtn{
						width: 88rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #E5EEFF;
						font-size: 20rpx;
						color: #0055FF;
						margin: 0;
						padding: 0;
						border: none;
						border-radius: 24rpx;
						box-sizing: border-box;
						&.nochat{
							color: #99BBFF;
						}
					}
				}
				.author-tag{
					margin-left: 20rpx;
					white-space: nowrap;
					flex: 2;
					.tag-top{
						.hit-result{
							padding: 0 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							background: linear-gradient(-90deg, #8C0000 0%, #330000 100%);
							border-radius: 4rpx;
							font-weight: 500;
							color: #F2E9C2;
						}
						.red-history{
							margin-left: 10rpx;
							padding-left: 10rpx;
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 4rpx;
							background: #F23030;
							box-sizing: border-box;
							.bg-white{
								padding: 0 10rpx;
								margin-right: 2rpx;
								height: 32rpx;
								line-height: 32rpx;
								background-color: #FFFFFF;
								border-radius: 0 4rpx 4rpx 0;
								margin-left: 10rpx;
								box-sizing: border-box;
							}
						}
					}
					.article-num{
						margin-top: 15rpx;
						padding-left: 10rpx;
						height: 36rpx;
						width: fit-content;
						line-height: 36rpx;
						background: #0055FF;
						border-radius: 4rpx;
						box-sizing: border-box;
						.right-view{
							padding: 0 10rpx;
							margin-right: 2rpx;
							height: 32rpx;
							line-height: 32rpx;
							background-color: #FFFFFF;
							border-radius: 0 4rpx 4rpx 0;
							margin-left: 10rpx;
							box-sizing: border-box;
							.right-icon{
								margin-left: 20rpx;
								width: 12rpx;
								height: 12rpx;
							}
						}
					}
					.expert-article{
						margin-top: 15rpx;
						height: 48rpx;
						background: #F2F5FA;
						border-radius: 6rpx;
						padding: 0 20rpx;
						color: #5C7099;
						.icon{
							width: 25rpx;
							height: 26rpx;
						}
					}
				}
			}
		}
		.expert-list-item:first-child{
			margin-top: 0;
		}
		.expert-list-item:last-child{
			margin-bottom: 20rpx;
			&.thinborder{
				&::after{
					content: unset;
				}
			}
		}
	}
</style>
